<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li {
				width: 100px;
				height: 30px;
				background: #0f0;
				margin-top: 5px;
				font-size: 25px;
				line-height: 30px;

			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<!-- 
		事件委托：
		 将子元素的事件的监听工作委托交给父元素统一监听，
		 当子元素的事件发生时，再由父元素交给子元素处理
		 
		 委托方法
		 $(父元素).delegate(子元素, 事件, data, function)
				  
		优点：
		1、避免过多的子元素都绑定事件监听，影响效能
		2、动态新增加的子元素其事件也可被监听到
		 -->


		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<br>
		<input id="btn" type="button" value="新增li">

		<script>
			$(function() {
				$("#btn").click(function() {
					var $li = $("<li>新增的</li>");
					$("ul").append($li);
				});

				// $("li").click(function() {
				// 	$(this).css("background", "red");
				// });
			
				$("ul").delegate("li","click",function(){
					$(this).css("background", "red");
				})
				
				
			
			});
		</script>
	</body>
</html>
